<template>
    <el-table ref="classTable" :data="classList" style="width: 100%" @expand-change="handleExpandChange">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-table :data="studentMap[props.row.id]" style="width: 100%">
                    <el-table-column label="学号" align="center">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column label="学生姓名" align="center">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column label="年龄" align="center">
                        <template slot-scope="scope">{{ scope.row.age }}</template>
                    </el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column label="班级编号" align="center">
            <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="班级简称" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="班级全称">
            <template slot-scope="scope">{{ scope.row.fullName }}</template>
        </el-table-column>
        <el-table-column label="班主任" align="center">
            <template slot-scope="scope">{{ scope.row.teacher }}</template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'Table',
        data() {
            return {
                currentClassId: '',
                classList: [],
                studentMap: {},
                getRowKey(row) {
                    console.log(row.id)
                    return row.id
                }
            }
        },
        created() {
            this.fetchClassList()
            this.fetchStudentClassMap()
        },
        methods: {
            fetchClassList() {
                this.classList = [{
                    id: 'class-1',
                    name: '软工1班',
                    teacher: '于老师',
                    fullName: '软件工程学院-软件工程-1班'
                }, {
                    id: 'class-2',
                    name: '计科1班',
                    teacher: '张老师',
                    fullName: '软件工程学院-计算机科学技术-1班'
                }, {
                    id: 'class-3',
                    name: '软工2班',
                    teacher: '李老师',
                    fullName: '软件工程学院-软件工程-2班'
                }, {
                    id: 'class-4',
                    name: '工商1班',
                    teacher: '钱老师',
                    fullName: '商学院-工商管理-1班'
                }]
            },
            fetchStudentClassMap() {
                this.studentMap = {
                    'class-1': [
                        {
                            id: '20200101',
                            name: '小范',
                            age: 18
                        }, {
                            id: '20200102',
                            name: '小王',
                            age: 19
                        }, {
                            id: '20200103',
                            name: '小李',
                            age: 19
                        }
                    ],
                    'class-2': [
                        {
                            id: '20200201',
                            name: '小左',
                            age: 18
                        }, {
                            id: '20200202',
                            name: '小夏',
                            age: 19
                        }
                    ],
                    'class-3': [
                        {
                            id: '20200301',
                            name: '小丁',
                            age: 18
                        }, {
                            id: '20200302',
                            name: '小杨',
                            age: 19
                        }
                    ],
                    'class-4': [
                        {
                            id: '20200401',
                            name: '小许',
                            age: 18
                        }
                    ]
                }
            },
            handleExpandChange(row, expandRows) {
                const $classTable = this.$refs.classTable
                if (expandRows.length > 1) {
                    expandRows.forEach(expandRow => {
                        if (row.id !== expandRow.id) {
                            $classTable.toggleRowExpansion(expandRow, false)
                        }
                    })
                }
                this.currentClassId = row.id
            }
        }
    }
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
